<div class="pac-page-header">
  <div class="w-full flex flex-col items-center gap-4 my-8">
    <pac-user-avatar-editor
      [user]="user()"
    ></pac-user-avatar-editor>
    <!-- <img class="avatar w-16 h-16 rounded-full flex"
      [src]="user?.imageUrl || '/assets/images/avatar-default.svg'" alt="{{user | user}}" /> -->
    <div class="text-base flex">{{user()?.email}}</div>
  </div>

  <nav mat-tab-nav-bar class="pac-tab-nav-bar w-full" color="accent" mat-align-tabs="center" mat-stretch-tabs="false" disableRipple
    [tabPanel]="tabPanel">
    <span mat-tab-link [routerLink]="['profile']"
      routerLinkActive #rla="routerLinkActive"
      [routerLinkActiveOptions]="{exact: true}"
      [active]="rla.isActive"
    >
      {{ 'PAC.KEY_WORDS.Profile' | translate: {Default: 'Profile'} }}
    </span>
    <span mat-tab-link [routerLink]="['password']"
      routerLinkActive #rla2="routerLinkActive"
      [routerLinkActiveOptions]="{exact: true}"
      [active]="rla2.isActive"
    >
    {{ 'PAC.KEY_WORDS.Password' | translate: {Default: 'Password'} }}
    </span>
  </nav>
</div>
<mat-divider></mat-divider>
<mat-tab-nav-panel #tabPanel class="pac-page-body flex flex-col items-center"
  [@routeAnimations]="o.isActivated && o.activatedRoute.routeConfig.path">
  <router-outlet #o="outlet"></router-outlet>
</mat-tab-nav-panel>
